<template>
  <div>
    <div class="top">
      <div>
        <router-link to="/emit"><img src="../../img/设置.png" alt="" class="she"></router-link>
      </div>
      <div class="user-top">
        <div v-if="token">
          <img :src="avatars" alt="" class="user">
          <span class="name">{{ nickname }}</span>
        </div>
        <div v-else>
          <img src="../../img//user.jpg" alt="" class="user">
          <!-- <span class="name">ms3VW6mIEY</span> -->
          <span class="name" @click="tologin">点击登录 ></span>
        </div>
      </div>
      <div class="hui" @click="gohui">
        <img src="../../img/会员中心.png" alt="" class="hui-img">
        <span class="hui-span">会员</span>
        <button class="hui-btn">权益中心</button>
      </div>
    </div>
    <div class="box">
      <div @click="zxwz">
        <img src="../../img/a1_03.png" alt="">
        <span>在线问诊</span>
      </div>
      <div @click="jkda">
        <img src="../../img/a1_05.png" alt="">
        <span>健康档案</span>
      </div>
      <div @click="yyjy">
        <img src="../../img/a1_09.png" alt="">
        <span>用药建议</span>
      </div>
      <div @click="yxdd">
        <img src="../../img/a1_10.png" alt="">
        <span>优选订单</span>
      </div>
      <div @click="wdys">
        <img src="../../img/a1_13.png" alt="">
        <span>我的医生</span>
      </div>
      <div @click="sfjh">
        <img src="../../img/a1_14.png" alt="">
        <span>随访计划</span>
      </div>
    </div>
    <div class="tit">
      <van-cell is-link title="商品订单" class="cell" @click="toshop">
        <span class="sp"><img src="../../img/mine-cart.jpg" alt=""
            class="simg"></span>
      </van-cell>
      <van-cell is-link title="挂号订单" class="cell" @click="order"></van-cell>
      <van-cell is-link title="收货地址" class="cell" @click="address"></van-cell>
      <van-cell is-link title="我的卡券" class="cell" @click="card"></van-cell>
      <van-cell is-link title="门诊预约" class="cell" @click="make"></van-cell>
      <van-cell is-link title="商品收藏" class="cell" @click="collection"></van-cell>
      <van-cell is-link title="意见反馈" @click="feedback"></van-cell>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
// 跳转到会员权益
const gohui=()=>{
  router.push('/member')
}
// 跳转在线问诊页面
const zxwz = () => {
  // window.location.href = '/zxwz'
  router.push('/zxwz')
}
// 跳转健康档案页面
const jkda = () => {
  // window.location.href = '/jkda'
  router.push('/jkda')
}
// 跳转用药建议页面
const yyjy = () => {
  // window.location.href = '/yyjy'
  router.push('/yyjy')
}
// 跳转优选订单页面
const yxdd = () => {
  // window.location.href = '/yxdd'
  router.push('/yxdd')
}
// 跳转我的医生页面
const wdys = () => {
  // window.location.href = '/wdys'
  router.push('/wdys')
}
// 跳转随访计划页面
const sfjh = () => {
  // window.location.href = '/sfjh'
  router.push('/sfjh')
}
// 跳转登录页面
const tologin = () => {
  // window.location.href = '/login'
  router.push('/login')
}
// 跳转到我的订单页
const toshop = () => {
  router.push('/myshop')
  // window.location.href = '/myshop'
}
// 跳转到挂号订单
const order=()=>{
  router.push('/order')
}
// 跳转到收货地址页
const address =()=>{
  router.push('/address')
}
// 跳转到我的卡券页
const card =()=>{
  router.push('/mycard')
}
// 跳转到门诊预约页
const make =()=>{
  router.push('/make')
}
// 跳转到商品收藏页
const collection=()=>{
  router.push('/collection')
}
// 跳转到意见反馈页
const feedback=()=>{
  router.push('/feedback')
}

// 获取token
const token = localStorage.getItem('token')
const nickname = localStorage.getItem('nickname')
const avatars = localStorage.getItem('avatars')
</script>
<style scoped>
.top {
  width: 100%;
  height: 380px;
  background: linear-gradient(to bottom, #E7F3FF,#EFF3FC);
  margin-top: -80px;
}

.she {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 40px;
  top: 20px;
}

.user-top {
  width: 100%;
  height: 160px;
  margin-top: 80px;
  align-items: center;
}

.user {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: 30px;
  margin-top: 120px;
}

.name {
  margin-left: 30px;
  position: absolute;
  top: 150px;
  font-size: 30px;
  /* align-items: center; */
}

.hui {
  width: 94%;
  height: 100px;
  background-color: #000;
  position: relative;
  margin-left: 3%;
  border-radius: 20px;
  top: 100px;
}

.hui-img {
  width: 60px;
  height: 60px;
  margin-top: 20px;
  margin-left: 20px;
}

.hui-span {
  position: absolute;
  color: bisque;
  font-weight: 500;
  margin-top: 30px;
  margin-left: 20px;
  font-size: 30px;
}

.hui-btn {
  width: 150px;
  height: 52px;
  border-radius: 26px;
  background-color: #F8B16D;
  border: none;
  position: absolute;
  right: 30px;
  top: 26px;
  font-size: 26px;
}

.simg{
  width: 60px;
  height: 60px;
  margin-right: 10px;
  margin-top: 10px;
}

.box {
  width: 100%;
  height: 360px;
  background-color: #F7F7F9;
}

.box>div {
  width: 47%;
  height: 100px;
  border-radius: 10px;
  background-color: #fff;
  float: left;
  margin-left: 2%;
  margin-top: 14px;
  position: relative;
}

.box>div>img {
  width: 60px;
  height: 60px;
  margin-top: 20px;
  margin-left: 20px;
}

.box>div>span {
  align-items: center;
  position: absolute;
  top: 30px;
  left: 100px;
  font-weight: 600;
  font-size: 30px;
}

.tit {
  font-size: 32px;
  font-weight: 600;
}

.cell {
  height: 84px;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
</style>
